<script>
import axios from "axios";
import FriendData from "@/components/dialog/FriendData.vue";

export default {
  name: "LetterView",
  components: {FriendData},
  data(){
    return{
      list:[],
      data_dialog:false,
      friendID:""
    }
  },
  methods:{
    getList() {
      axios.get("/api/notification/")
          .then(res => {
            if(res.data.code === 0) {
              this.list = res.data.data
            }else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    showInfo(id) {

      if(id !== 0 && id !== this.$store.state.user.id) {
        this.friendID=id
        this.data_dialog=true
      }
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<template>
  <div class="cont_box">
    <div class="data_dialog">
      <el-dialog :visible.sync="data_dialog" title="她说梦里全都有的主页" top="10vh" width="70%" destroy-on-close>
        <friend-data :id="friendID"></friend-data>
      </el-dialog>
    </div>
    <el-card class="letter_card" v-for="(item,index) in list" :key="index">
      <div class="letter_top">
        <el-avatar :src="item.avatar"
                   class="letter_avatar" @click.native="showInfo(item.uid)"></el-avatar>
        <div class="letter_top_right">
          <div class="letter_nick">{{item.nickname}}</div>
          <div class="letter_time">{{ item.time }}</div>
        </div>
      </div>

      <div class="letter_text_box">
        {{ item.message }}
      </div>

      <div class="l_pl_box">
        <div class="l_pl_left">
          <el-avatar :src="$store.state.user.avatar" shape="square"></el-avatar>
        </div>
        <div class="l_pl_right">
          <div class="l_pl_r_nick">
            @{{$store.state.user.nickname}}
            <div class="pl_nr">
              {{ item.notification }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <h2 v-show="list.length === 0 ">没有更多通知</h2>
  </div>
</template>

<style scoped>
.letter_card {
  width: 90%;
  margin: 0 auto 20px;
}


.letter_top {
  width: 100%;
  margin-left: 40px;
  height: 80px;

  .el-avatar {
    height: 80px;
    width: 80px;
  }
}

.letter_avatar {
  float: left;
}

.letter_top_right {
  height: 80px;
  float: left;
  margin-left: 20px;
}

.letter_nick {
  height: 50px;
  line-height: 55px;
  font-size: 19px;
  font-weight: bold;
}

.letter_time {
  height: 30px;
  line-height: 20px;
  color: #7e8a8c;
}

.letter_text_box, .l_pl_box {
  width: 80%;
  margin-left: 140px;
  font-size: 17px;
}

.l_pl_box {
  width: 85%;
  margin: 20px auto;
  background-color: #f1f2f5;
  height: 100px;
  border-radius: 4px;
}

.l_pl_left {
  float: left;

  .el-avatar {
    height: 100px;
    width: 100px;
  }
}

.l_pl_right {
  width: 85%;
  float: left;
  margin-left: 20px;
  height: 100px;
  display: flex;
  align-items: center;
}

.l_pl_r_nick {
  font-weight: bold;
  font-size: 17px;
}

.pl_nr {
  font-weight: normal;
  margin-top: 5px;
  font-size: 13px;
}
</style>